<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		     <script src="../js/vue.min.js"></script>
			 <script src="../js/axios.js"></script>
	</head>
	<body>
		<!--
		json算静态文件，一般不支持post请求，配置你服务器对json的请求加上post
		Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
		Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中
		使用 response.data 读取 JSON 数据
		一般发送请求是这么写:
		axios.get('/user?id=12345&name=user')
		.then(function (res) {
		    console.log(res);
		}).catch(function (err) {
		    console.log(err);
		});
		
		
		axios.get('/user', {  //params参数必写 , 如果没有参数传{}也可以
		    params: { 
		       id: 12345，
		       name: user
		    }
		})
		.then(function (res) {
		    console.log(res);
		})
		.catch(function (err) {
		    console.log(err);
		});
		
		
		methods: {
		     submitfun:function () {
				// axios.post('http://localhost:8044/qibieController/add?qibiename='+this.qibiename)
				// 	.then(function (response) {
				//	   console.log(response.data);
				// 		window.location.href="qibie.html";
				// 	}).catch(function (error) {
		        //     console.log(error.message);
				// 	})
				
				axios({
				    method: 'POST',
				    url: 'http://localhost:8044/qibieController/add',
				    params: { //多个字段数据：依次写在下面
				        'qibiename': this.qibiename,
				       		},
				    headers: { //解决跨域权限问题
				      'Content-Type': 'application/x-www-form-urlencoded'
				    }
				} ).then(function (response) {
					    console.log(response.data);
						window.location.href="qibie.html";
					}).catch(function (error) {
					   console.log(error.message);
					})
			},
			
		  }
		
		
		
		-->
		<div id="app">
		  <div  v-for="site in info">
		    {{ site.name }}
		  </div>
		</div>
		<script type = "text/javascript">
		new Vue({
		  el: '#app',
		  data() {
		    return {
		      info: null
		    }
		  },
		  <!--钩子函数就是指在所有函数执行前，我先执行了的函数成功后的操作，使用then
		  -->
		  <!--created也可以  created:创建了vue实例则调用
		  <!-- mounted:生成了页面后则调用：两者都可以-->
		  mounted(){
		   this.getData();
		  },
		  
		   methods: {
			   getData() {
			   axios
			     .get('../jsondata/88.json')
			     .then(response => (this.info = response.data.sites))
			     .catch(function (error) { // 请求失败处理
			       alert(error);
			     });
                }
		   }
		  
		  
		})
		</script>
	
	</body>
</html>
